import loadingURL from '@/assets/loading.svg';
import styles from '@/directives/loading.module.less';
//获取el里面有loading的img元素
/**
 * 
 * @param {*} el 要查看的父元素 
 */
function getImgDom(el){
    return el.querySelector('img[data-role=loading]');
}

function createImg(){
    const img = document.createElement('img');
    img.dataset.role = 'loading';
    img.src = loadingURL;
    img.className = styles.loading;
    return img;
}

export default function(el,binding){
    const curImg = getImgDom(el);
    if(binding.value){
        //创建img,如果存在就不创建了
        if(!curImg){
            const img = createImg();
            el.appendChild(img);
        }
        
    }
    else{
        //删除img,如果有再删除
        if(curImg){
            curImg.remove();
        }
    }
}